<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="story">
<input type="hidden" name="glId" id="glId" :value="garden_list.glId">
<input type="hidden" :value="garden_list.glName" id="gradeName">
    <h1>生成费项通知</h1>
<hr>
<form action="" class="layui-form" lay-filter="rnForm" id="add_rn_form">
    <input type="hidden" :value="userName" id="userName" name="adult">
    <div class="layui-form-item">
        <div class="layui-inline" style="margin-right: -2px">
            <label class="layui-form-label">生成月份</label>
            <div class="layui-input-inline">
                <input type="text" name="start" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-form-mid">-</div>
            <label class="layui-form-label" style="text-align: center;padding-left: 0px;padding-right: 0px;">结束月份</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="end" id="test2" placeholder="yyyy-MM-dd">
            </div>
        </div>

            <div class="layui-inline" style="margin-right: -2px">
                <label class="layui-form-label" style="text-align: center;padding-left: 0px;padding-right: 0px;">年级</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="grade"  lay-filter="grade">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-right: -2px">
                <label class="layui-form-label" style="text-align: center;padding-left: 0px;padding-right: 0px;">班级</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="manage" name="pmId">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
        <button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1"> 生成</button>
    </div>
<table  lay-filter="rnTable" id="rnTable"></table>
    <div id="save" style="display: none;margin-top: 35px;">
        <div class="layui-inline" style="margin-right: -2px">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width: 320px;"  id="Remarks" name="Remarks">
            </div>
        </div>
        <button type="button" class="layui-btn" style="margin-left: 20px;" onclick="skshSave()" lay-submit=""> 保存</button>
    </div>
</form>
</div>
<script type="text/javascript">
    var time9 = setInterval(function () {
        if ($("#glId").val() != ""){
            $.get("http://localhost:9999/Grade/gradeIndex",{gIId:$("#glId").val()},function(data){
                $.each(data,function(){
                    var opt = $("<option></option>").appendTo("#grade");
                    opt.text(this.gradeName).val(this.gradeId);
                });
                layui.form.render();
            });

            $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                $.each(data.data,function(){
                    var opt = $("<option></option>").appendTo("#manage");
                    opt.text(this.cmName).val(this.cmId);
                });
                layui.form.render();
            });
            clearInterval(time9);
        }
    },100)
</script>
<script>
    var table ;
    var form;
    var totle;
    layui.use(['form','table'],function(){
        table = layui.table;
        form = layui.form;
        //头工具栏事件
        table.on('toolbar(rnTable)', function(obj){
            switch(obj.event){
                case 'batchDelete': //批量删除
                                    //获取选中行
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if(data.length == 0){
                        layer.msg('请选择要删除的数据行');
                        return;
                    }
                    layer.confirm("确定要删除选中的数据吗？",function (index) {
                        var p = "?";
                        for(let role of data){
                            p += `id=${role.id}&`;
                        }

                        $.post(`http://localhost:8888/role/batchDelete${p}`,d => {
                            layer.close(index);
                            table.reload("roleTable");
                        });
                    })
                    break;
                case 'add':
                    $.get('add.html',function (data) {
                        layer.open({
                            title: '添加角色',
                            type:1,
                            anim:4,
                            skin:'layui-layer-molv',
                            area:'500px',
                            content:data,
                            maxmin:true,
                            btn : ['确定','取消'],
                            yes : function () {

                            }
                        });
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

        //监听行内的工具条
        table.on('tool(rnTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    layer.close(index);
                    $.post("http://localhost:8888/role/delete",{id:data.id},function(d){
                        table.reload("roleTable",{
                            page:{
                                curr:1
                            }
                        });
                    });
                });
            }else if (layEvent === 'edit'){//TODO 编辑

            } else if (layEvent === 'detail'){ //TODO 查看详情

            }
        });
        form.on('select(grade)', function(data){
            if (data.value != -1){
                $("#manage").empty();
                $.get("http://localhost:9999/Manage/manage2",{glId:$("#glId").val(),gradeId: data.value},function(data){
                    $.each(data,function(){
                        var opt = $("<option></option>").appendTo("#manage");
                        opt.text(this.cmName).val(this.cmId);
                    });
                    form.render();
                });
            }else{
                $("#manage").empty();
                $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                    $.each(data.data,function(){
                        var opt = $("<option></option>").appendTo("#manage");
                        opt.text(this.cmName).val(this.cmId);
                    });
                    form.render();
                });
            }
        })
    });

    function availableTem(d){
        if (d.available == 1){
            return "启用";
        }
        return "未启用";
    }

    function skshSave() {
        $.get("http://localhost:9999/Sksh/pd",{start: $("#test1").val(),end:$("#test2").val(),pmId:$("#manage").val()},function (d) {
           if (d == 0){
               var sj = $("#add_rn_form").serialize();
               $.get("http://localhost:9999/Sksh/add",sj,function () {
                   alert("保存成功");
                   location.reload(true);
               })
           } else {
               alert("已提交")
           }
        })
    }
    function reloadData(){
        $.get("http://localhost:9999/Te/fxName",{deStartyears: $("#test1").val(),deEndyears: $("#test2").val(), cmId:$("#manage").val()},function (data) {
            var array = new Array();
            array.push({field:'pid',title:'编号'});
            array.push({field:'pName',title:'名称',templet:function (d) {
                    return d.child.pName;
                }});
            array.push({field:'cmNamea',title:'班级',templet:function (d) {
                    return d.child.manage.cmName;
                }});
            array.push({field:'sj',title:'收费区间',width:200,templet:function (d) {
                    return d.deStartyears+" --- "+d.deEndyears;
                }});
                for (let i = 0; i < data.length; i++) {
                array.push({field:'pid',title:data[i],templet:function (d) {
                      for (let j = 0; j < d.child.fxinfos.length; j++) {
                            if (data[i] == d.child.fxinfos[j].ciName) {
                                return d.child.fxinfos[j].price;
                            }
                        }
                         return '0.00';
                    }});


            }
            array.push({field:'a',title:'总价格',templet:function (d) {
                   return d.totalSum;
                }});
            table.render({
                elem: '#rnTable',
                cols:[array],
                id:'rnTable',
                text:{none:'请根据日期年级班级生成费项'},
                url:'http://localhost:9999/Te/index',
                even:true,
                where : {
                    deStartyears: $("#test1").val(),
                    deEndyears: $("#test2").val(),
                    cmId:$("#manage").val()
                }
            })
        })
           setTimeout(function () {
               $("#save").slideDown(500);
           },350)

    }
    var vm = new Vue({
        el:'#story',
        data:{
            garden_list:null,
            userName:null
        },
        created:function () {
            var User_PermissionData = JSON.parse(sessionStorage.getItem("login_user"));
            this.garden_list = User_PermissionData.kmsUser.garden_list;
            this.userName = User_PermissionData.kmsUser.userName;
        },
    })
</script>
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.available}}" title="启用" lay-filter="roleTable" {{ d.available == 1 ? 'checked' : '' }}>
</script>

<!--<script type="text/html" id="childPid">
    <span lay-filter="rnTable">{{d.a.pid}}</span>
</script>-->

<script type="text/html" id="childName">
    <span lay-filter="rnTable" >{{d.child.pName}}</span>
</script>
<script type="text/html" id="cmName">
    <span>{{d.child.manage.cmName}}</span>
</script>
<script type="text/html" id="deStartyearsAnddeEndyears">
    <span>{{d.deStartyears}}&nbsp;-----&nbsp;{{d.deEndyears}}</span>
</script>
<!--<script type="text/html" id="fxinfo">
    {{# for(var i = 0; i < d.child.fxinfos.length; i++){ }}
    &lt;!&ndash;<img src='${path}/upload/{{d.imageList[i].imageUrl}}' alt="Product 1" class="tile-image">&ndash;&gt;
    <span>{{d[i].ciName}}</span>
    {{# } }}
</script>-->

<!--<script type="text/html" id="deEndyears">
    <span>{{d.deEndyears}}</span>
</script>-->

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="import"><i class="layui-icon layui-icon-upload-drag"></i> 批量导入</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="detail"><i class="layui-icon layui-icon-app"></i></a>
    <a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });
    });
</script>
</body>
</html>